<!--suppress ALL -->
<template>
  <CenterVue>
    <div class="draw">
      <span>| 服务订单 ></span> 订单列表
      <a-form>
        <div class="tool">
          <a-select
            default-value="请选择"
            :name="mySelection"
            style="width: 150px;"
            @change="handleSelect"
          >
            <a-select-option
              value="请选择"
              disabled
            >
              请选择
            </a-select-option>
            <a-select-option value="petMasterName">
              姓名
            </a-select-option>
            <a-select-option value="phone">
              手机号
            </a-select-option>
          </a-select>
          <a-input
            style="width: 50%"
            :placeholder="Tips"
            v-model="queryParam"
          />
          <a-button
            type="primary"
            icon="search"
            @click="queryBySelection"
          >
            Search
          </a-button>
        </div>
      </a-form>
      <a-input-group compact />
      <div class="my_table">
        <template>
          <a-table
            :columns="columns"
            :data-source="data"
            :scroll="{y: 750 }"
            :pagination="pagination"
            :current="pagination.current"
            row-key="id"
            @change="tableChange"
            bordered
          >
            <template
              slot="action"
              slot-scope="record"
            >
              <a-button
                type=""
                slot="action"
                @click="getInfo(record)"
              >
                详情
              </a-button>
              <a-button
                type="primary"
                slot="action"
                @click="showDrawer(record)"
              >
                修改
              </a-button>
            </template>
          </a-table>
        </template>
      </div>
      <!--服务修改 -->
      <a-drawer
        title="服务订单 ~/~ 订单修改"
        placement="right"
        :width="720"
        :closable="false"
        :visible="visible"
        :get-container="false"
        :wrap-style="{ position: 'absolute' }"
        @close="onClose"
      >
        <!--form-->
        <div>
          <a-form
            :form="form"
            layout="vertical"
            hide-required-mark=""
          >
            <div>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="客户姓名:">
                    <a-input
                      :value="ServeItemSelected.serveName"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="服务名称:">
                    <a-input
                      :value="ServeItemSelected.servePrice"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="预约时间:">
                    <a-input
                      :value="ServeItemSelected.serveStander"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="价格:">
                    <a-input
                      :value="ServeItemSelected.suitStander"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="耗时:">
                    <a-input
                      :value="ServeItemSelected.timeConsuming"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="服务等级:">
                    <a-input
                      :value="ServeItemSelected.serveGrade"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="服务规格:">
                    <a-input
                      :value="ServeItemSelected.serveType"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="适用规格:">
                    <a-input
                      :value="ServeItemSelected.serveSchedule"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </a-form>
        </div>
        <a-button
          :style="{ marginRight: '20px' }"
          @click="onClose"
        >
          取消
        </a-button>
        <a-button
          type="primary"
          @click="onClose"
        >
          提交
        </a-button>
      </a-drawer>
      <!--服务详情  model-->
      <div>
        <a-modal
          v-model="infoModal"
          title="服务订单 ~/~ 订单详情"
          centered
          :width="900"
          @ok="infoModal = false"
        >
          <div>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="客户姓名:">
                  <a-input
                    :value="ServeItemSelected.serveName"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="服务名称:">
                  <a-input
                    :value="ServeItemSelected.servePrice"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="预约时间:">
                  <a-input
                    :value="ServeItemSelected.serveStander"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="价格:">
                  <a-input
                    :value="ServeItemSelected.suitStander"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="耗时:">
                  <a-input
                    :value="ServeItemSelected.timeConsuming"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="服务等级:">
                  <a-input
                    :value="ServeItemSelected.serveGrade"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="服务规格:">
                  <a-input
                    :value="ServeItemSelected.serveType"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="适用规格:">
                  <a-input
                    :value="ServeItemSelected.serveSchedule"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </div>
        </a-modal>
      </div>
    </div>
  </CenterVue>
</template>

<script>
import CenterVue from '@/components/CenterVue'
// 设置表头参数
const columns = [
  { title: '姓名', width: 80, dataIndex: 'petMasterName', align: 'center' },
  { title: '手机号', width: 120, dataIndex: 'phone', align: 'center' },
  { title: '品类', dataIndex: 'serveType', width: 60, align: 'center' },
  { title: '预约时间', dataIndex: 'serveSchedule', width: 90, align: 'center' },
  { title: '服务规格', dataIndex: 'serveStander', width: 90, align: 'center' },
  { title: '适用规格', dataIndex: 'suitStander', width: 90, align: 'center' },
  { title: '耗时', dataIndex: 'timeConsuming', width: 60, align: 'center' },
  { title: '服务等级', dataIndex: 'serveGrade', width: 80, align: 'center' },
  { title: '价格', dataIndex: 'servePrice', width: 60, align: 'center' },
  {
    title: '操作',
    align: 'center',
    key: 'operation',
    width: 140,
    scopedSlots: { customRender: 'action' }
  }
]
// 假数据
const data = []
for (let i = 1; i < 100; i++) {
  data.push({
    id: i,
    serveName: `A ${i}`,
    serveType: 'SSS',
    serveSchedule: 'SPIC',
    suitStander: 9.9,
    serveStander: 'VIP',
    timeConsuming: 'CD',
    serveGrade: '10-24',
    servePrice: '6'
  })
}

export default {
  name: 'Serve',
  components: {
    CenterVue
  },
  data () {
    return {
      Tips: '支持通过宠主姓名,或者宠主手机号进行订单查询',
      mySelection: '',
      // 查询条件参数
      queryParam: '',
      // 表单
      form: this.$form.createForm(this),
      // 服务修改抽屉是否可见
      visible: false,
      // 服务详情弹窗是否可见
      infoModal: false,
      // 加载动画
      loading: false,
      // 数据源
      data,
      // 表格表头
      columns,
      // 选择服务id
      idSelected: 0,
      // 被选择服务对象
      ServeItemSelected: {
        id: 10,
        serveName: `A `,
        serveType: 'SSS',
        serveSchedule: 'SPIC',
        suitStander: 9.9,
        serveStander: 'VIP',
        timeConsuming: 'CD',
        serveGrade: '10-24',
        servePrice: '6'
      },
      // 分页器
      pagination: {
        total: 0,
        current: 1,
        defaultPageSize: 8
        // 每页展示数据条数 默认关闭
        // showSizeChanger: true,
        // pageSizeOptions: ['5', '10', '15', '20']
      }
    }
  },
  created () {
    this.idSelected = this.ServeItemSelected.id
  },
  methods: {
    // 下拉框事件
    handleChange (e) {
      console.log(e)
    },
    // 查询条件切换
    handleSelect (e) {
      console.log(e)
      if (e === 'petMasterName') {
        this.Tips = '请输入宠主姓名,进行查询. eg. 张尽处...'
        this.mySelection = e
      } else if (e === 'phone') {
        this.Tips = '请输入宠主手机号,进行查询. eg. 135***...'
        this.mySelection = e
      }
    },
    queryBySelection () {
      alert(this.mySelection + ' : ' + this.queryParam)
      // 进行Ajax进行查询...
    },
    // table
    getInfo (obj) {
      this.infoModal = true
      this.ServeItemSelected = obj
      console.log(JSON.stringify(this.ServeItemSelected))
      console.log('每页数据:' + this.pagination.defaultPageSize)
      console.log('当前页码:' + this.pagination.current)
    },
    tableChange (e) {
      this.pagination.current = e.current
    },
    // 抽屉
    afterVisibleChange (val) {
      console.log('visible', val)
    },
    showDrawer (obj) {
      this.visible = true
      this.ServeItemSelected = obj
      // alert(JSON.stringify(this.ServeItemSelected))
    },
    onClose () {
      this.visible = false
    }
  }
}
</script>

<style scoped>
.draw {
  height: 800px;
  width: 1200px;
  overflow: hidden;
  position: relative;
  border: 1px solid #ebedf0;
  borderRadius: 2px;
  padding: 48px;
  textAlign: center;
  background: #fafafa
}

.tool {
  margin-top: 10px;
  display: flex;
}

.my_table {
  margin-top: 10px;
}

span {
  font-weight: bolder;
  font-size: 25px;
}

img {
  background-color: #b7b7b7;
  width: 400px;
  height: 150px;
}
</style>
